<template>
  <div class="dashboard-editor-container">
    <!-- 全屏容器 -->
    <!-- 第一行 -->
    <dv-full-screen-container class="box">
      <div class="module-box">
        <div style="flex: 0 1 30%;">
          <dv-decoration-10 style="height: 5rem;" />
          <div class="title">
            <span>{{ current }}</span>
          </div>
        </div>
        
        <div style="flex: 0 1 40%;">
          <!-- 这里面又分成三等分 -->
          <div class="d-flex">
            <!-- 左 -->
            <dv-decoration-8 style="height: 50rem; flex: 1;" />
            <!-- 中 -->
            <dv-decoration-11
              style="flex: 1; height: 50rem;"
              class="tc box-middle"
              >智能商会信息</dv-decoration-11
            >
            <!-- 右 -->
            <dv-decoration-8 :reverse="true" style="height: 50rem; flex: 1;" />
          </div>
        </div>
        <div style="flex: 0 1 30%;">
          <dv-decoration-10 style="height: 5rem; transform: rotate(180deg);"/>
          <div class="consloe" @click="inconsole">控制台</div>
        </div>
      </div>
      <div class="conpanyTitle">智能商会信息信息信息信息</div>
      <!-- 第二行 -->
      <Modulemiddle></Modulemiddle>
      <!-- 第三行 -->
      <Modulebottom></Modulebottom>
    </dv-full-screen-container>
  </div>
</template>

<script>
//  import ChartLeft from "../views/chartLeft"
// import ChartMiddle from "../views/chartMiddle"
import Modulemiddle from "../views/modulemiddle";
import Chartleft from "../views/modulemiddle/chartleft.vue";
import Modulebottom from "../views/modulebottom";
// 引入接口
// import {getPartyProportion} from '@/api/bigscreen/bigscreen'
import { mapState } from "vuex";
export default {
  name: "",
  components: {
    // ChartLeft
    Modulemiddle,
    Modulebottom,
    Chartleft,
  },
  data() {
    return {
      current: "", //当前时间
    };
  },
  mounted() {},
  created() {
    this.getselectMemberNum();
    this.gettime();
  },
  computed: {
    ...mapState({
      selectMemberNum: (state) => state.bigscreen.menmberNum,
    }),
  },
  methods: {
    gettime() {
      this.gettimeInterval();
      // setInterval(this.gettimeInterval,1000)
      //  setInterval(this.gettimeInterval.bind(this),1000)
    },
    gettimeInterval() {
      // let _this = this  // 这段代码创建了一个新的变量_this,并将其设置为this值，这样即使你改变了this的值(上下文)比如一个函数，你仍然可以访问到原来的this的值
      let year = new Date().getFullYear(); // 获取当前时间的年份
      let month = new Date().getUTCMonth() + 1; // 获取当前时间的月份
      let day = new Date().getDate(); // 获取当前时间的日
      let getday = new Date().getDay();
      let week = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let weekday = week[getday];
      console.log(weekday, "week");
      //  判断当小于10的时候，在前面补0
      this.current = `${year}年${month}月${day}日: ${weekday}`;
    },
    getselectMemberNum() {
      this.$store.dispatch("bigscreen/getselectMemberNum");
    },
    inconsole() {
      this.$router.push("index");
    },
  },
};
</script>
 <style lang="scss" scoped> 
$color-blue: #0d3d7f;
$font-color: #09f5fc;
$text-color: #fff;
/* 先删除默认的内外边距 */
* {
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 62.5%;
}
body,
input,
button,
a,
textarea,
select {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft";
  font-size: 1.4rem;
  line-height: 1.5;
  color: #333;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
a {
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: none;
}
a:hover {
  filter: alpha(opacity=90);
  opacity: 0.9;
}
.tc {
  text-align: center;
}
.tr {
  text-align: right;
}
.tl {
  text-align: left;
}
// 写一个弹性布局的样式
.module-box {
  display: flex;
  justify-content: space-between;
  // margin: 10rem;
}
.d-flex {
  display: flex;
}
.box-middle {
  align-self: center;
  color: $text-color;
}
// `flex: 0 1 50%` 是 CSS 中的一个属性设置，用于控制 Flexbox 布局中的元素如何伸缩。这个设置可以分解为三个部分：`flex-grow`, `flex-shrink`, 和 `flex-basis`³。

// - `flex-grow: 0` 表示当剩余空间存在时，该元素不会放大。
// - `flex-shrink: 1` 表示当空间不足时，该元素将缩小。所有项目的 `flex-shrink` 为1时，当空间不足时，缩小的比例相同⁴⁵。
// - `flex-basis: 50%` 表示在分配多余空间之前，元素的初始主尺寸（宽度或高度）是其容器的 50%。

// 总的来说，`flex: 0 1 50%` 的意思是，当容器空间充足时，该元素不会放大，其宽度为容器的50%；当容器空间不足时，该元素会等比例缩小。³⁴⁵

.dashboard-editor-container {
  background: url("../assets/bigscreen.png") no-repeat center center;
  width: 100%;
  height: 100vh;
  background-size: cover;
  // font-size: 24rem;
//   .box {
// background-color: pink;
// height: auto;
//   }
//   .title {
//     color: #ffffff;
//     display: flex;
//     flex-direction: row;
//     justify-content: space-between;
//     padding: 10rem;
//   }
}
// .consloe {
//   color: $text-color;
//   margin-left: 480rem;
// }
// .conpanyTitle {
//   width: 400rem;
//   height: 50rem;
//   line-height: 50rem;
//   background: url("../assets/images/bgtitle.png");
//   transform: translate(190%);
//   padding: 0 2.8vw;
//   text-align: center;
//   border-radius: 30rem;
//   font-weight: 800;
//   font-size: 1.04vw;
//   background-size: 100% 100%;
//   color: #00cafe;
// }
</style>
